<script setup lang="ts">
import { onMounted, reactive, ref, nextTick, defineProps, watch } from "vue";
import { useStore } from "@/store/index";
import * as echarts from "echarts";
import {
  useTitle,
  useLegend,
  useGrid,
  useUpdate,
  usePieStyle,
  useColorStyle,
} from "@/utils/chart";

const props = defineProps<{
  uuid: string;
}>();

const xAxisData = ref<any[]>([]);

const store = useStore();
const titleConfig = useTitle(props.uuid, store);
const legendConfig = useLegend(props.uuid, store);
const gridConfig = useGrid(props.uuid, store);
const pieStyleConfig = usePieStyle(props.uuid, store);
const colorStyleConfig = useColorStyle(props.uuid, store);

onMounted(() => {
  const options = reactive({
    series: [
      {
        data: [
          { value: 1048, name: "测试1" },
          { value: 735, name: "测试2" },
          { value: 580, name: "测试3" },
        ],
        type: "pie",
        smooth: true,
      },
    ],
  });
  xAxisData.value = ["测试1", "测试2", "测试3"];
  nextTick(() => {
    const chartDom = document.getElementById(props.uuid);
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      useUpdate(
        [
          titleConfig,
          legendConfig,
          gridConfig,
          pieStyleConfig,
          colorStyleConfig,
        ],
        myChart,
        options
      );
      watch(
        () => store.widgetConfig[props.uuid].height,
        () => {
          myChart.resize();
        }
      );
      watch(
        () => store.widgetConfig[props.uuid].width,
        () => {
          myChart.resize();
        }
      );
    }
  });
});
</script>

<template>
  <div :id="uuid" style="width: 100%; height: 100%"></div>
</template>

<style lang="less"></style>
